/**
 * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */


import utils from '@/utils/utils';
import './index.less';
import { useState } from 'react';
import pass from '@/assets/AiImgs/pic-pass.png'
import nopass from '@/assets/AiImgs/pic-nopass.png'
import { useNavigate } from 'react-router-dom'
interface IProps {
  data?: any;
  lastItem?:boolean;
  islatest?:number
}
export default function Item(props:IProps) {
    const navigate = useNavigate();
    const toTrainPage=(id:any)=>{
        navigate(`/aiPracticeDetail?prcid=${id}`,{ replace: false })
    }
    //黄色背景根据看过的状态 ${props?.data?.is_already_see===1?'bg-white':'bg-yellow'}
    return (
        <div>
            <div className={`mb-2.5 ${props?.data?.is_already_see===1?'bg-white':'bg-yellow'}  rounded-xl`}  onClick={()=>toTrainPage(props?.data?.id)}>
                <div className='text-base mb-2.5 px-[12px] pt-5 font-semibold relative  items-center'><div className='absolute borderLeft left-0 bottom-[-2px]'></div><div className='pl-2 flex text-[#222222] font-bold' style={{fontFamily:'PingFangTC-Semibold'}} dangerouslySetInnerHTML={{__html:props?.data?.title}}>{}</div>
                    <div className='absolute right-3 top-3'><img src={props?.data?.training_result===1?pass:nopass} className='w-[52px]'/></div>
                </div>
                <div className='px-5'>
                        <div className='text-sm mb-2.5 text-[#222222]'>第<span style={{fontFamily:'SpeedeeApp-BoldItalic'}}  className='font-bold text-base inline-flex mx-0.5'>{props?.data?.training_times}</span>次陪练·综合得分<span style={{fontFamily:'SpeedeeApp-BoldItalic'}}  className='font-bold text-base'>{props?.data?.score}</span></div>
                        <div className="pb-4"  style={{color:'#999'}}>
                            {props?.data?.dimension_scores?.map((s:any,index:number)=>{
                                return <div className='text-[12px]' key={index}>{s.dimension_name} ：{s.score}分</div>
                            })}
                            {/* <div className='text-[12px]'>充分了解情况 ：2分</div>
                            <div className='text-[12px]'>建立真诚的情感联系 ：2分</div>
                            <div className='text-[12px]'>灵活的解决方案 ：1分</div> */}
                        </div>
                        <div className='pt-4 pb-5 border-dashed border-t text-[12px]'  style={{color:'#999'}}>训练时间：{props?.data?.training_at}</div>
                </div>
                <div className='btnBG'></div>
             </div>
             {/* <div className=" mb-2.5 bg-yellow rounded-xl">
                <div className='text-base mb-2.5 px-[12px] pt-5 font-semibold relative  items-center'><div className='absolute borderLeft left-0 bottom-[-2px]'></div><div className='pl-2 flex text-[#222222] font-bold' style={{fontFamily:'PingFangTC-Semibold'}}>肉品不熟</div>
                <div className='absolute right-3 top-3'><img src={nopass} className='w-[52px]'/></div>
                </div>
                <div className='px-5'>
                        <div className='text-sm mb-2.5 text-[#222222]'>第<span style={{fontFamily:'SpeedeeApp-BoldItalic'}} className='font-bold text-base inline-flex mx-0.5'>3</span>次陪练·综合得分<span style={{fontFamily:'SpeedeeApp-BoldItalic'}}  className='font-bold text-base'>85</span></div>
                        <div className="pb-4 "  style={{color:'#999'}}>
                            <div className='text-[12px]'>充分了解情况 ：2分</div>
                            <div className='text-[12px]'>建立真诚的情感联系 ：2分</div>
                            <div className='text-[12px]'>灵活的解决方案 ：1分</div>
                        </div>
                        <div className='pt-4 pb-5 border-dashed border-t text-[12px] '  style={{color:'#999'}}>训练时间：2024.06.20 12:20:20</div>
                </div>
                <div className='btnBG'></div>
             </div> */}
             
        </div>
        
    );
}
